<template>
  <!--优秀期刊-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>

    <div style="margin: 10px;text-align: center;font-size: 18px;font-weight: bold">
      温馨提示：该页面为测试数据，正式网站只显示加入联盟的期刊！
    </div>

    <div class="wrapper">
      <div class="div1" v-for="periodical in periodical">
        <router-link :to="{path:'journalDetails',query:{id:periodical.id}}">
          <Row>
            <i-col span="4">
              <div class="img">
                <img :src="periodical.photo" alt="" style="width: 150px;height: 200px">
                <div class="ul">
                  <ul class="li">
                    <li><img src="../../assets/img/u653.png" alt=""></li>
                    <li><img src="../../assets/img/u654.png" alt=""></li>
                    <li><img src="../../assets/img/u692.png" alt=""></li>
                  </ul>
                </div>
              </div>
            </i-col>
            <i-col span="20">
              <div class="details">
                <p class="p1">
                  <router-link :to="{path:'journalDetails',query:{id:periodical.id}}" class="a">{{periodical.cname}}
                  </router-link>
                </p>
                <p class="p2"><span style="display:inline-block;width: 81px">主办单位：</span>{{periodical.sponsor}}</p>
                <p class="p2"><span style="display:inline-block;width: 81px">期刊周期：</span>{{periodical.publicationCycle}}
                </p>
                <p class="p2"><span style="display:inline-block;width: 81px">国内刊号：</span>{{periodical.cn}}</p>
                <Row class="p2">
                  <i-col span="2">
                    <span style="width: 80px">期刊简介：</span>
                  </i-col>
                  <i-col span="22">
                    <span class="synopsis">{{periodical.intro}}</span>
                  </i-col>
                </Row>
              </div>
            </i-col>
          </Row>
        </router-link>
      </div>
      <!--Vue组件-->
      <div class="page">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>

  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import paging from '../module/paging'

  export default {
    components: {
      carousel, paging
    },
    data() {
      return {
        autoplaySpeed: 100000,
        goodJournalsLink: this.$api.url + '/periodicals/periodicalsExcellence/',
        all: 1,
        cur: 1,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        periodical: []
      }
    },
    mounted() {
      this.dataArray()
    },
    methods: {
      returnValue(data) {
        this.cur = data;
        this.dataArray()
      },
      dataArray() {
        this.$axios.get(this.goodJournalsLink + this.cur).then((res) => {
          this.all = res.data.totalPage;
          this.periodical = res.data.lists;
        });
      },
    },
  }
</script>

<style scoped>
  a {
    color: #000;
  }

  .wrapper {
    margin: 20px 0;
  }

  .wrapper .div1 {
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .wrapper .div1 .img {
    padding: 10px;
  }

  .wrapper .div1 .img .ul ul {
    list-style: none;
    white-space: nowrap;
    float: left;
    padding-top: 10px;
  }

  .wrapper .div1 .img .ul ul li {
    width: 35px;
    display: inline-block;
    white-space: nowrap;
  }

  .wrapper .div1 .img .ul ul li > img {
    width: 100%;
    height: 100%;
  }

  .wrapper .div1 .details {
    padding: 10px;
  }

  .wrapper .div1 .details .p1 .a {
    display: inline-block;
    font-size: 18px;
    color: #000;
    padding-bottom: 5px;
  }

  .wrapper .div1 .details .p2 {
    padding: 2px 0;
    font-size: 15px;
  }

  .synopsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>
